<template>
  <div class="bg-orange-100 border-b border-orange-200">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <nav class="flex flex-wrap gap-4">
        <router-link
            to="/all"
            class="px-4 py-2 rounded flex items-center transition-all duration-300"
            :class="{'bg-orange-100 text-orange-700': isActive('/all')}"
            :style="{ 'background-color': isActive('/all') ? '#FFF3E0' : '#FFFAF0' }"
        >
          所有图书
        </router-link>
        <router-link
            v-for="t in types"
            :key="t.id"
            :to="{ path: '/getBookType', query: { id: t.id } }"
            class="px-4 py-2 rounded transition-all duration-300"
            :class="{'bg-orange-100 text-orange-700': isActiveRoute('/getBookType', t.id), 'hover:bg-orange-200': true}"
            :style="{ 'background-color': isActiveRoute('/getBookType', t.id) ? '#FFF3E0' : '#FFFAF0' }"
        >
          {{ t.name }}
        </router-link>
<!--        <router-link to="/all" style="align-content: center">所有图书</router-link>-->
<!--        <router-link v-for="t in types" :to="{path:'/getBookType',query:{id:t.id}}" class="px-4 py-2 rounded hover:bg-orange-200 transition-colors duration-300">-->
<!--          {{t.name}}</router-link>-->

<!--        <router-link to="/category/romance" class="px-4 py-2 rounded hover:bg-orange-200 transition-colors duration-300">言情</router-link>-->
      </nav>
      <div class="relative">
        <input type="text" placeholder="请输入关键词" v-model="searchText" class="pl-4 pr-10 py-2 rounded-full border border-orange-300 focus:outline-none focus:ring-2 focus:ring-orange-300 transition-all duration-300 w-64">
        <button @click="handleSearchText" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-500">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>

import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();


const searchText=ref('')
const handleSearchText=()=>{
  if (searchText.value.trim().length > 0) {
    router.push({
      name: 'All', // 路由名称，需在路由配置中定义
      query: {
        keyword: searchText.value
      }
    })
  }
}

const types=ref([]);
const getBookType=()=>{
  axios.get("/bookType/getBookType").then((resp)=>{
    types.value=resp.data;
  })
}
onMounted(()=>{
  getBookType();
})

// 判断路由是否激活
const isActive = (path) => {
  return route.path === path;
};

const isActiveRoute = (path, id) => {
  return route.path === path && route.query.id === String(id);
};
</script>
<style scoped>
/* 定义颜色变量 */
:root {
  --bg-default: #FFFAF0;    /* 淡橙色背景 - 固定背景色 */
  --bg-active: #FFF3E0;     /* 浅橙色背景 - 选中状态 */
  --bg-hover: #FFE0B2;      /* 中橙色背景 - 悬浮状态 */
  --text-active: #E65100;   /* 深橙色文本 - 选中状态 */
}

nav {
  overflow-x: auto;
  white-space: nowrap;
}
</style>